<template>
  <div class="goods">
    <div class="list_groups">
        <div v-for="item in List " :key="item.id" class="card_list">
            <div class="van-card flex_left">
                <img :src="item.img"/>
                <!-- <van-tag mark type="danger" class='mark'>{{item.mark}}</van-tag> -->
                <div class="card_right">
                    <div class="flex">
                        <div class="title">{{item.title}}</div>
                        <!-- <div class="desc">{{item.address}}</div> -->
                    </div>
                    <div class="flex">
                        <div class="desc">{{item.distance}}m<sup>2</sup></div>
                        <div class="price">{{item.price}}元/m<sup>2</sup></div>
                    </div>
                    <div class="desc">{{item.desc}}</div>

                    <div class="tag_group flex_left">
                        <van-tag plain type="danger" v-for="tag in item.tag " :key="tag">{{tag}}</van-tag>
                    </div>
                     <div class="flex">
                        <div class="desc">浏览：{{item.browseNum}}人</div>
                        <div class="desc">评论：{{item.signNum}}人</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    



 
  </div>
</template>

<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Swipe,
  Card ,
  Toast,
  SwipeItem,
  GoodsAction,
  GoodsActionBigBtn,
  GoodsActionMiniBtn
} from 'vant';

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [Card.name]: Card,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn
  },

  data() {
    return {
      goods: {
        title: '美国伽力果（约680g/3个）',
        price: 2680,
        express: '免运费',
        remain: 19,
        thumb: [
          'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
          'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
        ]
      },
      List:[
          {
              id:0,
              img:'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=c1569f7c4734970a537e187df4a3baad/d788d43f8794a4c2149bb07808f41bd5ad6e392c.jpg',
              title:'花样年华二期',
              tag:['地铁旁','学区房','公园房'],
              address:'高新区',
              desc:'三室二厅一卫',
              browseNum:220,
              signNum:222,
               distance:'171.11',
               price:'8000',
               status:0 //年
          },
           {
              id:1,
              img:'https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=31ec06d00946f21fdd395601974d0005/faf2b2119313b07e2ca618230fd7912397dd8c86.jpg',
              title:'恒大江华二期',
              tag:['地铁旁','公园房'],
              address:'高新区',
              desc:'二室二厅',
              browseNum:20,
              signNum:22,
              distance:'90.56',
              price:'4800',
              status:1 //月


          },
          {
              id:2,
              img:'https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=1510b019b33533fae1bb9b7cc9ba967a/9f2f070828381f30e5ecb4beab014c086e06f02b.jpg',
              title:'天香产业一期',
              tag:['家电齐全','交通便利','地铁旁'],
              address:'高新区',
              desc:'三室一厅',
              browseNum:66,
              signNum:22,
              distance:'120.09',
              price:'17809',
              status:2  //团购

          },
      ]
    };
  },

  methods: {
    formatPrice() {
      return '¥' + (this.goods.price / 100).toFixed(2);
    },

    onClickCart() {
      this.$router.push('cart');
    },

    sorry() {
      Toast('暂无后续逻辑~');
    }
  }
};
</script>

<style lang="less">
.goods {
  padding-bottom: 50px;
  &-swipe {
    img {
      width: 100%;
      display: block;
      height: 200px;
    }
  }

  .van-tag {
    margin-right: 2px;
  }
  .list_groups{
      padding: 10px 10px;
      box-sizing: border-box;
      .card_list{
          margin-bottom: 10px;
          .van-card{
              position: static;
              border: 1px solid #e5e5e5;
              background-color: #ffffff;
              padding:15px 15px;
              box-sizing: border-box;
              img{
                  width: 140px;
                  height: 100px;
              }
              .mark{
                  position: absolute;
                  left: 20px;
                  width: 30px;
                  height: 15px;
                  color: #ffffff;
                  font-size: 10px;
              }
              .card_right{
                  width: 100%;
                margin-left: 15px;
              }
              .desc{
                  color: #9A9B9C;
                  margin-top: 2px;
              }
              .price{
                  font-size: 16px;
                  color: red;
              }
              .tag_group{
                  margin-top: 5px;
                  margin-bottom: 5px;
              }
          }
      }
  }
  .flex{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .flex_left{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
}
</style>
